<template>
  <div>
    <div style="display:flex;justify-content: space-between;margin-bottom:10px">
      <el-input v-model="queryParams.appName" placeholder="输入搜索应用名称" style="width:200px"
                clearable @blur="getAppTopicPage" @keyup.enter.native="getAppTopicPage" />
      <el-button type="primary" @click="topicConfig">配置Topic</el-button>
    </div>
    <dt-table
      :table-opts="tableOpts"
      :is-show-column="false"
      :pagination-data="{
        total:total,
        queryParams:queryParams
      }"

      :is-column-search="false"
      @pagination="pagination"
    />
    <topic-config ref="topicConfigRef" />
  </div>

</template>
<script>
import topicConfig from './topicConfig.vue'
import dataSynchronizationApi from '@/framework/api/datasync/dataSynchronization'

export default {
  components: {
    topicConfig
  },
  data() {
    return {
      tableOpts: {
        configPagination: '1',
        indexTableCol: {
          label: '序号',
          width: 70
        },
        firstTableCol: {
          select: false
        },
        tableCol: [
          {
            prop: 'appName',
            label: '应用名称',
            show: true
          },
          {
            prop: 'appCode',
            label: '应用编码',
            show: true
          },
          {
            prop: 'topic',
            label: 'Topic',
            show: true
          }
        ],
        operator: {
          width: 150,
          operatorBtn: [
            {
              text: '修改',
              size: 'small',
              click: (row, col, cellValue) => { return this.handleUpdate(row) }
            },
            {
              text: '删除',
              size: 'small',
              click: (row, col, cellValue) => { return this.handleDelete(row) }
            }
          ]
        },
        tableData: []
      },
      total: 0,
      queryParams: {
        pageSize: 10,
        pageNo: 1,
        appName: ''
      }
    }
  },
  watch: {
    'queryParams.appName': {
      handler(n, o) {
        this.getAppTopicPage()
      }
    }
  },
  methods: {
    pagination() {
      this.getAppTopicPage()
    },
    handleUpdate(row) {
      this.$refs.topicConfigRef.openDialog(row, 'update')
    },
    handleDelete(row) {
      this.$dtMessageBox({
        title: '提示',
        message: '确定删除该条数据吗',
        type: 'warning'
      }).then(() => {
        dataSynchronizationApi.deleteTopic({ id: row.id }).then((res) => {
          this.$dtMessage({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.getAppTopicPage()
        })
      })
    },
    topicConfig() {
      this.$refs.topicConfigRef.openDialog('', 'create')
    },
    getAppTopicPage() {
      dataSynchronizationApi.appTopicPage(this.queryParams).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
      })
    }
  }
}
</script>
